<template>
  <el-row :gutter="20">
    <el-col :span="24" :lg="18" :sm="24">
      <el-card shadow="hover" class="animate__animated animate__fadeIn">
        <v-chart class="chart" :option="systemOption" style="height: 400px" />
      </el-card>
    </el-col>
    <el-col :span="24" :lg="6" class="animate__animated animate__fadeIn">
      <el-card shadow="hover">
        <v-chart class="chart" :option="platformOption" style="height: 400px" />
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { computed } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'

use([CanvasRenderer, LineChart, PieChart, TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent])

const props = defineProps({
  dashboard: {
    default: () => ({}),
    type: Object
  }
})

const systemOption = computed(() => {
  if (!props.dashboard.visit) {
    return {
      title: { text: '统计' },
      tooltip: { trigger: 'axis' },
      legend: { data: ['暂无数据'] },
      xAxis: { type: 'category', data: [] },
      yAxis: { type: 'value' },
      series: []
    }
  }

  const types = {
    addon: '应用',
    platform: '平台',
    admin: '控制台',
    customer: '客户端'
  }

  const series = []
  const dataSeries = props.dashboard.visit.series || {}

  for (const key in dataSeries) {
    if (Object.hasOwnProperty.call(dataSeries, key)) {
      series.push({
        name: types[key] || key,
        type: 'line',
        smooth: true,
        data: dataSeries[key]
      })
    }
  }

  return {
    title: { text: '统计' },
    tooltip: { trigger: 'axis' },
    legend: {
      left: '50px',
      data: series.map((item) => item.name)
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.dashboard.visit.data_x || []
    },
    yAxis: {
      type: 'value'
    },
    series
  }
})

const platformOption = computed(() => ({
  title: { text: '应用统计' },
  legend: { top: 'bottom' },
  tooltip: { trigger: 'item' },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: '应用访问次数',
      type: 'pie',
      radius: ['10%', '80%'],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: '爆客' },
        { value: 38, name: '轻课' },
        { value: 32, name: '抖音霸屏' },
        { value: 30, name: '直推客' },
        { value: 26, name: '疯狂社群' },
        { value: 22, name: '暴走神器' },
        { value: 18, name: '抖音一键关注' }
      ]
    }
  ]
}))
</script>

<style scoped>
.chart {
  width: 100%;
}
</style>
